

<?php   if (!empty($this->error)): ?>
    <?php if ($this->pic->status == Talktangle_Api_Core::TANGLE_STATUS_COMPLETED) :?>
        
             <div><span class='tip'><?php echo $this->translate('Your pic had been untangle.') ?></span></div>
    <?php else:?>
             <div><span class='tip'> <?php echo $this->translate('Your pic had been expire.') ?></span></div>
    <?php endif; ?>
       
<?php return; endif; ?>
<?php 
     $this->headScript()
          ->appendFile($this->baseUrl() . '/application/modules/Talktangle/externals/scripts/pictangle.js');
     $this->headScript()
          ->appendFile($this->baseUrl() . '/application/modules/Talktangle/externals/scripts/main.js');
      
    ?>
<?php $picApi = Engine_Api::_()->getApi('ptangle','talktangle'); 
      $row =  $picApi->getNumberOffsetImage(); 
      $row = $row + 1;
      
?>
<style>
.piccell img{
    width:93px;
    height:93px;
}

</style>

<?php $width = 95 * ($row - 1);?>
<div class="pictangle_container" id = "pictangle_container">
    <ul style="width:<?php echo $width?>px;">
        <?php if (empty($this->matrix[0][1])) :?> 
            <li class="col_space row-0 col-1 piccell"><img src="<?php echo $this->baseUrl('/application/modules/Talktangle/externals/images/pic1/space.png') ?>"/> </li>
            <li class="game_title" style="width:<?php echo $width - (93 + 2*($row-1))?>px ;"><a>This is the title of game</a></li>
        <?php else : ?>
            <li class="col_space row-0 col-1 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[0][1] -1 ]; //$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_0.jpg') ?>"/> </li>
            <li class="game_title" style="width:<?php echo $width - (93 + 2*($row-1))?>px ;"><a>This is the title of game</a></li>
        
        <?php endif;?>
        <?php for($i = 1; $i < $row; $i++):  ?>
            <?php for($j = 1; $j < $row; $j++):  ?>
                <?php  if (empty($this->matrix[$i][$j])) : ?>
                    <li class="col_<?php echo ($i-1)?>_<?php echo ($j-1) ?> row-<?php echo $i ?> col-<?php echo $j ?> piccell"><img src="<?php echo $this->baseUrl('/application/modules/Talktangle/externals/images/pic1/space.png') ?>"/> </li>
                <?php else :?>
                    <li class="col_<?php echo ($i-1)?>_<?php echo ($j-1) ?> row-<?php echo $i ?> col-<?php echo $j ?> piccell"><img src="<?php echo $this->matrixImg[$this->matrix[$i][$j] - 1 ]; //$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_0.jpg') ?>"/> </li>
                <?php endif;?>
            <?php endfor;?>
        <?php endfor;?>
        <!--
        <?php /* ?>
        <li class="col_0_0 row-1 col-1 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[1][1]-1]; //$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_0.jpg') ?>"/> </li>
        <li class="col_0_1 row-1 col-2 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[1][2]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_1.png') ?>"/> </li>
        <li class="col_0_2 row-1 col-3 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[1][3]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_2.png') ?>"/> </li>
        <li class="col_0_3 row-1 col-4 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[1][4]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_3.png') ?>"/> </li>
        <li class="col_0_4 row-1 col-5 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[1][5]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/0_4.png') ?>"/> </li>
        
        <li class="col_1_0 row-2 col-1 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[2][1]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/1_0.png') ?>"/> </li>
        <li class="col_1_1 row-2 col-2 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[2][2]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/1_1.png') ?>"/> </li>
        <li class="col_1_2 row-2 col-3 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[2][3]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/1_2.png') ?>"/> </li>
        <li class="col_1_3 row-2 col-4 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[2][4]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/1_3.png') ?>"/> </li>
        <li class="col_1_4 row-2 col-5 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[2][5]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/1_4.png') ?>"/> </li>
        
        <li class="col_2_0 row-3 col-1 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[3][1]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/2_0.png') ?>"/> </li>
        <li class="col_2_1 row-3 col-2 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[3][2]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/2_1.png') ?>"/> </li>
        <li class="col_2_2 row-3 col-3 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[3][3]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/2_2.png') ?>"/> </li>
        <li class="col_2_3 row-3 col-4 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[3][4]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/2_3.png') ?>"/> </li>
        <li class="col_2_4 row-3 col-5 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[3][5]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/2_4.png') ?>"/> </li>
        
        <li class="col_3_0 row-4 col-1 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[4][1]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/3_0.png') ?>"/> </li>
        <li class="col_3_1 row-4 col-2 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[4][2]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/3_1.png') ?>"/> </li>
        <li class="col_3_2 row-4 col-3 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[4][3]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/3_2.png') ?>"/> </li>
        <li class="col_3_3 row-4 col-4 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[4][4]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/3_3.png') ?>"/> </li>
        <li class="col_3_4 row-4 col-5 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[4][5]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/3_4.png') ?>"/> </li>
    
        <li class="col_4_0 row-5 col-1 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[5][1]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/4_0.png') ?>"/> </li>
        <li class="col_4_1 row-5 col-2 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[5][2]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/4_1.png') ?>"/> </li>
        <li class="col_4_2 row-5 col-3 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[5][3]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/4_2.png') ?>"/> </li>
        <li class="col_4_3 row-5 col-4 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[5][4]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/4_3.png') ?>"/> </li>
        <li class="col_4_4 row-5 col-5 piccell"><img src="<?php echo $this->matrixImg[$this->matrix[5][5]-1];//$this->baseUrl('/application/modules/Talktangle/externals/images/pic1/4_4.png') ?>"/> </li>
        <?php */ ?>
        -->
    </ul>
</div>

<div class="container" id="container_<?php echo $this->picId;?>">

<?php //echo $this->partial('picmatrix.tpl','talktangle',array('row' => 6,'col' => 6, 'matrix' => $this->matrix, 'matrixImg'=>$this->matrixImg)) ?>
</div>                
<script type="text/javascript">
    var data = <?php echo json_encode($this->matrix); ?>;
    var container = $('container_<?php echo $this->pic_id;?>');
    var pic = new picTangle($('pictangle_container'),<?php echo $this->viewer->user_id?>,<?php echo $this->pic_id?>,<?php echo $row -1 ?>,<?php echo $row -1 ?>,'pic');
    pic.setDataToMatrix(data);
</script>

<a style="color:white;" href="javascript:void(0)" onclick="pic.suggest();">suggest</a>
<a style="color:white;" href="javascript:void(0)" onclick="pic.unPictangle();">untangle</a>